<template>
  <div>
    <van-grid square :border="false" :column-num="4" :gutter="0">
      <van-grid-item class="img-76" v-for="(item, i) in pictureList" :key="'childPicture'+ i">
<!--        <video v-if="item.type === 'video'" class="childImg" :poster="item.coverImage" @click="playVideo(item)">-->
<!--          <source :src="item.url"/>-->
<!--        </video>-->
        <van-image v-if="item.type === 'image'" class="childImg" fit="cover" :src="item.coverImage ? item.coverImage : item.url" @click="imagePreview(i)"></van-image>
        <van-image v-else class="childImg" fit="cover" :src="item.coverImage" @click="playVideo(item)"></van-image>
      </van-grid-item>
    </van-grid>
    <van-overlay :show="showVideo" @click="showVideo = false">
      <div class="wrapper" @click.stop>
        <div class="all-video-div">
          <video width="100%" height="80%" controls="controls" :src="showVideoItem.url" :poster="showVideoItem.coverImage">
          </video>
          <div class="div-align-justify-center">
            <van-icon class="margin-top-div-8" style="background-color: #FFFFFF;border-radius: 40px" name="close" size="40" @click="showVideo = false"/>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>

import {Badge, Button, Field, Grid, GridItem, Image, ImagePreview, Overlay} from "vant";
export default {
  name: "FieldPictureList",
  props: {
    type: { type: Number, default: () => 1 },
    pictureList: { type: Array, default: () => [] },
  },
  components: {
    [Field.name]: Field,
    [Button.name]: Button,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]: Image,
    [Badge.name]: Badge,
    [Overlay.name]: Overlay,
  },
  data() {
    return {
      showVideo: false,
      showVideoItem: {
        url: '',
        coverImage: ''
      },
      inputCount: 0,
      desc: this.value,
    };
  },
  methods: {
    playVideo(item) {
      this.showVideoItem.url = item.url
      this.showVideoItem.coverImage = item.coverImage
      this.showVideo = true;
    },
    imagePreview(i){
      let imageList = []
      let index = 0
      this.pictureList.forEach(picItem => {
        index = index + 1
        if (String(picItem.type) === 'image') {
          imageList.push(picItem.url)
        } else {
          if (index < i) {
            i = i -1
          }
        }
      })
      if (imageList.length > 0) {
        ImagePreview({images : imageList, startPosition: i});
      }
    },
    downloadVideo() {
      this.$emit("downloadVideoEvent")
    },
  },
};
</script>

<style scoped>
.all-video-div {
  margin-top: 30px;
  width: 100%;
  height: 100vh;
}
.childImg {
  width: 76px;
  height: 76px;
  border-radius: 4px;
}
.video-div {
  display: flex;
}
.video-right-div {
  width: 280px;
}
.button-download-div {
  height: 48px;
  width: 100px;
  background: #fcd538;
  box-shadow: 0 4px 24px rgba(251, 202, 4, 0.32);
  border-radius: 24px;
  margin-left: 16px;
}
</style>